<script setup>
import {useRouter, useRoute} from 'vue-router';
import useUserStore from "@/store/modules/user.js";
import {save as saveDingDan} from "@/api/system/dingdan";
import {ref} from "vue";
import Food from "@/assets/images/food.png";
const router = useRouter()
const route = useRoute()
const userStore = useUserStore()
const { proxy } = getCurrentInstance();
const params = ref(JSON.parse(route.query.info));

console.log(params);

async function commitInfo(){
  params.value.caoGao = 0;
  let rsp = await saveDingDan(params.value);
  if(rsp.code === 200) {
    proxy.$modal.msgSuccess("提交成功");
    router.push({path: "/shangBao" });
  } else {
    proxy.$modal.msgWarning("提交失败，请联系管理员");
  }
}

async function commitCaoGao(){
  params.value.caoGao = 1;
  let rsp = await saveDingDan(params.value);
  if(rsp.code === 200) {
    proxy.$modal.msgSuccess("提交成功");
    router.push({path: "/shangBao" });
  } else {
    proxy.$modal.msgWarning("提交失败，请联系管理员");
  }
}
</script>

<template>
  <div class="page-body">
    <div class="info-area">
      <el-text size="large" style="font-weight: bold;font-size: 24px;">{{ params.dangKouName }}</el-text>
      <div class="info">
        <div class="info-line" v-if="params.id != null">
          <el-text>订单编号：{{ params.id }}</el-text>
        </div>
        <div class="info-line">
          <el-text>品类名称：{{ params.pinLeiName }}</el-text>
        </div>
        <div class="info-line">
          <el-text>供货日期：{{ params.riQi }}</el-text>
        </div>
      </div>
    </div>

    <div class="cai-pin-area">

      <el-scrollbar>
        <div class="cai-pin-list">
          <div class="cai-pin-item" v-for="item in params.list">
            <div class="cai-pin-item-img">
              <el-image :src="Food"></el-image>
            </div>
            <div class="cai-pin-item-txt">
              <div class="huo-pin-name">{{ item.name }}({{ item.id }})</div>
              <div class="huo-pin-gui-ge">规格：{{ item.guiGe }} | 单位： {{ item.danWei }}</div>
              <div class="huo-pin-pin-pai">品牌：{{ item.pinPai }}</div>
              <div class="huo-pin-price">￥ {{ item.price }}</div>
            </div>

            <div class="cai-pin-item-btn">
              <div class="shang-cang-btn">
                <el-text style="font-weight: bold;font-size: 25px;">X {{item.buyCount}}</el-text>
              </div>
            </div>

          </div>
        </div>
      </el-scrollbar>
    </div>

    <div class="tong-ji-area">
      <div class="tong-ji">
        <div class="gou-wu-che-img">
        <span>
          <el-badge :value="params.count">
            <el-image :src="Food" style="width: 30px;height: 30px;"/>
          </el-badge>
        </span>

          <span style="margin-left: 30px;">总计：{{ params.sum }}</span>
        </div>

        <div class="gou-wu-che-count">
          <div></div>
        </div>

        <div>
          <el-button type="info" round @click="commitCaoGao">存草稿</el-button>
          <el-button type="success" round @click="commitInfo">立即上报</el-button>
        </div>
      </div>
    </div>


  </div>
</template>

<style scoped lang="scss">

$tongJi-area-height: 60px;


.info-area {

  .info {
    margin-top: 20px;
  }

  .info-line {
    padding: 5px;
    font-size: larger;
  }
}

.cai-pin-area {
  margin-top: 30px;
  margin-bottom: $tongJi-area-height;
  .cai-pin-list {
    .cai-pin-item {
      padding: 5px;
      display: flex;
      flex-direction: row; // 主轴方向row横排 | row-reverse倒横排 | column竖排 | column-reverse倒竖排
      flex-wrap: nowrap; // 主轴换行方式：nowrap不换行 | wrap换行且第一行在上方 | wrap-reverse换行且第一行在下方
      justify-content: flex-start; // 主轴上的对齐方式: flex-start左对齐 | flex-end右对齐 | center居中 | space-between两端对齐且项目之间的间隔都相等 | space-around每个项目两侧的间隔相等
      align-items: center; // 副轴对齐方式，flex-start起点对齐 | flex-end终点对齐 | center中点对齐 | baseline基线对齐 | stretch如果项目未设置高度或设为auto，将占满整个容器的高度
      height: 100px;
      border-bottom: 1px solid lightgray;
      border-top: 1px solid lightgray;
      width: 100%;

      .cai-pin-item-img {
        height: 100px;
        width: 30%;

        .el-image {
          padding: 10px;
          width: 80px;
          height: 80px;
        }
      }

      .cai-pin-item-txt {
        width: 35%;

        .huo-pin-name {
          font-weight: bold;
          font-size: 18px;
        }

        .huo-pin-gui-ge {
          color: gray;
          font-size: 10px;
        }

        .huo-pin-pin-pai {
          color: gray;
          font-size: 10px;
        }

        .huo-pin-price {
          font-weight: bold;
          color: orangered;
        }
      }

      .cai-pin-item-btn {
        height: 100%;
        width: 35%;
        display: flex;
        flex-direction: column; // 主轴方向row横排 | row-reverse倒横排 | column竖排 | column-reverse倒竖排
        flex-wrap: nowrap; // 主轴换行方式：nowrap不换行 | wrap换行且第一行在上方 | wrap-reverse换行且第一行在下方
        justify-content: center; // 主轴上的对齐方式: flex-start左对齐 | flex-end右对齐 | center居中 | space-between两端对齐且项目之间的间隔都相等 | space-around每个项目两侧的间隔相等
        align-items: center; // 副轴对齐方式，flex-start起点对齐 | flex-end终点对齐 | center中点对齐 | baseline基线对齐 | stretch如果项目未设置高度或设为auto，将占满整个容器的高度

        .shang-cang-btn {

          .el-image {
            width: 20px;
            height: 20px;
          }
        }
      }

    }

  }
}

.tong-ji-area {
  z-index: 10;
  position: fixed;
  height: $tongJi-area-height;
  bottom: 0;
  width: 100%;
  background-color: white;
}

.tong-ji {
  width: 100%;
  padding: 10px;
  display: flex;
  flex-direction: row; // 主轴方向row横排 | row-reverse倒横排 | column竖排 | column-reverse倒竖排
  flex-wrap: nowrap; // 主轴换行方式：nowrap不换行 | wrap换行且第一行在上方 | wrap-reverse换行且第一行在下方
  justify-content: space-between; // 主轴上的对齐方式: flex-start左对齐 | flex-end右对齐 | center居中 | space-between两端对齐且项目之间的间隔都相等 | space-around每个项目两侧的间隔相等
  align-items: center; // 副轴对齐方式，flex-start起点对齐 | flex-end终点对齐 | center中点对齐 | baseline基线对齐 | stretch如果项目未设置高度或设为auto，将占满整个容器的高度
}

</style>